<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view class="container" :style="{paddingTop: `${statusBarHeight + navigationBarHeight}px`}">
		<u-navbar :title="shopInfo.shopName" @leftClick="back"></u-navbar>

		<view style="width: 100%;background-color: #fff;padding: 10px 0;margin-bottom: 5px;margin-top: 10px;"
			v-if="marketing.length">
			<view class="market-area" v-for="(item,index) in marketing" :key="index" @click="marketingClick(item)">
				<template v-if="item.url">
					<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
				</template>
				<template v-else>
					<u--text color="#ff0000" :text="item.title" align="center"></u--text>
				</template>
			</view>
		</view>

		<u-sticky :offset-top="statusBarHeight + navigationBarHeight" bgColor="#fff">
			<u-tabs :list="cateList" @change="activeChange" lineWidth="30" lineColor="#1aad19" :activeStyle="{
						color: '#1aad19',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
			    	}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="tabCurrent"></u-tabs>
		</u-sticky>



		<view class="scroll-view-container" :style="{  paddingBottom:`${safeBottom + 50}px`}">
			<scroll-view class="goods-area1" scroll-y="true">
				<view class="search-area" style="background-color: #fff;">
					<uni-search-bar bgColor="#EEEEEE" placeholder="点击搜索" @confirm="beginSearch" @cancel="cancelSearch"
						@clear="cancelSearch">
					</uni-search-bar>
				</view>
				<uv-waterfall column-count="2" :add-time="10" :left-gap="leftGap" :right-gap="rightGap" ref="waterfall"
					:column-gap="columnGap" v-model="goodsList" @changeList="changeList">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(goods, index) in list1" :key="goods.id" class="waterfall-item">
								<view class="waterfall-item__image" @click="goodsClick(goods)">
									<image :src="goods.multimediaUrl" mode="scaleToFill" :style="[imageStyle(goods)]"
										class="goods-pull-img">
									</image>
								</view>
								<view class="goods-show-intro">
									<view class="goods-intro">
										<view class="goods-name">{{goods.name}}</view>
										<view class="goods-price">
											{{priceTransform(goods.price)}}/{{goods.specification || ''}}
											<text class="goods-hua-price" v-if="goods.topPrice">
												{{priceTransform(goods.topPrice)}}/{{goods.specification || ''}}
											</text>
										</view>
									</view>
									<view class="goods-tag">
										<template v-if="(goods.stock || 0) <= 0">
											<uni-tag :inverted="true" :text="`已售罄`" class="goods-tag-item"
												size="small" />
										</template>
										<template v-else>
											<uni-tag :inverted="true"
												:text="`${goods.minSaleNum}${goods.specification || ''}起售`"
												v-if="goods.minSaleNum > 1" class="goods-tag-item" size="small"
												type="error" />
											<uni-tag :inverted="true" :text="storeText(goods.stock)"
												class="goods-tag-item" size="small" type="error"></uni-tag>
											<uni-tag :inverted="true"
												:text="`限购${goods.limitNum}${goods.specification || ''}`"
												class="goods-tag-item" v-if="goods.limitNum" size="small"
												type="error"></uni-tag>
											<uni-tag :inverted="true" :text="`限购${goods.limitTimes}次`"
												class="goods-tag-item" v-if="goods.limitTimes" size="small"
												type="error"></uni-tag>
										</template>
									</view>
									<view class="goods-number-area" v-if="goods.stock > 0">
										<my-number-box v-model="goods.count" background="#1aad19" color="#fff"
											:max="maxValue(goods)" :disabled="(goods.limitNum || goods.stock) <= 0"
											@plus.stop="plus(goods)" @minus="minus(goods)" />
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view v-for="(goods, index) in list2" :key="goods.id" class="waterfall-item">
								<view class="waterfall-item__image" @click="goodsClick(goods)">
									<image :src="goods.multimediaUrl" mode="scaleToFill" :style="[imageStyle(goods)]"
										class="goods-pull-img">
									</image>
								</view>
								<view class="goods-show-intro">
									<view class="goods-intro">
										<view class="goods-name">{{goods.name}}</view>
										<view class="goods-price">
											{{priceTransform(goods.price)}}/{{goods.specification || ''}}
											<text class="goods-hua-price" v-if="goods.topPrice">
												{{priceTransform(goods.topPrice)}}/{{goods.specification || ''}}
											</text>
										</view>
									</view>
									<view class="goods-tag">
										<template v-if="(goods.stock || 0) <= 0">
											<uni-tag :inverted="true" :text="`已售罄`" class="goods-tag-item"
												size="small" />
										</template>
										<template v-else>
											<uni-tag :inverted="true"
												:text="`${goods.minSaleNum}${goods.specification || ''}起售`"
												v-if="goods.minSaleNum > 1" class="goods-tag-item" size="small"
												type="error" />
											<uni-tag :inverted="true" :text="storeText(goods.stock)"
												class="goods-tag-item" size="small" type="error"></uni-tag>
											<uni-tag :inverted="true"
												:text="`限购${goods.limitNum}${goods.specification || ''}`"
												class="goods-tag-item" v-if="goods.limitNum" size="small"
												type="error"></uni-tag>
											<uni-tag :inverted="true" :text="`限购${goods.limitTimes}次`"
												class="goods-tag-item" v-if="goods.limitTimes" size="small"
												type="error"></uni-tag>
										</template>
									</view>
									<view class="goods-number-area" v-if="goods.stock > 0">
										<my-number-box v-model="goods.count" background="#1aad19" color="#fff"
											:max="maxValue(goods)" :disabled="(goods.limitNum || goods.stock) <= 0"
											@plus.stop="plus(goods)" @minus="minus(goods)" />
									</view>
								</view>
							</view>

						</view>
					</template>
				</uv-waterfall>

				<view class="no-data">
					~~没有更多商品啦~~
				</view>
			</scroll-view>
		</view>
		<view class="order-area" v-if="orderBtnShow"
			:style="{ height: 50 + safeBottom + 'px', paddingBottom: safeBottom + 'px' }">
			<view class="order-pay">
				<view class="order-list" @click="orderListClick">
					<uni-icons type="cart" size="25" color="#fff"></uni-icons>
					<view>已选购 {{ goodsCount || ''}}</view>
				</view>
				<view class="order-pay-btn" @click="createOrder">
					{{ orderText || '' }} 下单
				</view>
			</view>
		</view>
	</view>

	<uni-popup ref="selOrderPopup" type="bottom" :mask-click="false" :safe-area="false" style="z-index: 2099;">
		<view class="sel-order-pop"
			:style="{ height: `${windowHeight - statusBarHeight - navigationBarHeight - 100}px` }">
			<view class="sel-order-header">
				<view class="sel-order-num">已选商品</view>
				<uni-icons type="closeempty" color="#c8c8c8" size="25" @click="closeSelPop"></uni-icons>
			</view>
			<view class="sel-order-list">
				<scroll-view scroll-y="true" :scroll-top="scorllTop">
					<view class="goods-show" v-for="item in selectGoodsList" :key="item.id">
						<view class="goods-show-header">
							<view>
								<image :src="imageSrc(item.multimediaUrl)" mode="aspectFill" class="goods-image">
								</image>
							</view>
							<view class="goods-show-intro">
								<view class="goods-name">{{ item.name }}</view>
								<view class="goods-price">
									{{ priceTransform(item.price) }}/{{ item.specification || '' }}
									<text class="goods-hua-price" v-if="item.topPrice">
										{{ priceTransform(item.topPrice) }}/{{ item.specification || '' }}
									</text>
								</view>
								<view class="goods-tag">
									<uni-tag :inverted="true" :text="`${item.minSaleNum}${item.specification || ''}起售`"
										v-if="item.minSaleNum > 1" class="goods-tag-item" size="small" type="error" />
									<uni-tag :inverted="true" :text="storeText(item.stock)" class="goods-tag-item"
										size="small" type="error"></uni-tag>
									<uni-tag :inverted="true" :text="`限购${item.limitNum}${item.specification || ''}`"
										class="goods-tag-item" v-if="item.limitNum" size="small" type="error"></uni-tag>
									<uni-tag :inverted="true" :text="`限购${item.limitTimes}次`" class="goods-tag-item"
										v-if="item.limitTimes" size="small" type="error"></uni-tag>
								</view>
							</view>
						</view>
						<view class="goods-show-footer">
							<my-number-box v-model="item.count" background="#1aad19" color="#fff" :max="maxValue(item)"
								:disabled="(item.limitNum || item.stock) <= 0" @plus.stop="plus(item)"
								@minus="minus(item)" />

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>

	<uni-popup ref="goodsPop" type="bottom" :mask-click="false">
		<view class="goods-detail-pop"
			:style="{ height: `${windowHeight - statusBarHeight - navigationBarHeight - 100}px` }">
			<view class="sel-order-header">
				<view class="sel-order-num"></view>
				<uni-icons type="closeempty" color="#c8c8c8" size="25" @click="closeGoodsPop"></uni-icons>
			</view>
			<view class="sel-goods">
				<view class="goods-info">
					<view class="goods-avatar"
						:style="{ backgroundImage: `url(${imageSrc(selGoodsDetail.multimediaUrl)})` }">
					</view>
					<view class="goods-param">
						<view class="goods-name">{{ selGoodsDetail.name }}</view>
						<view class="goods-price">{{ priceTransform(selGoodsDetail.price) }}/{{ selGoodsDetail.specification
							||
							'' }}
							<text class="goods-hua-price" v-if="selGoodsDetail.topPrice">
								{{ priceTransform(selGoodsDetail.topPrice) }}/{{ selGoodsDetail.specification || '' }}
							</text>
						</view>

						<view class="goods-tag">
							<uni-tag :inverted="true"
								:text="`${selGoodsDetail.minSaleNum}${selGoodsDetail.specification || ''}起售`"
								v-if="selGoodsDetail.minSaleNum > 1" class="goods-tag-item" size="small" type="error" />
							<uni-tag :inverted="true" :text="storeText(selGoodsDetail.stock)" class="goods-tag-item"
								size="small" type="error"></uni-tag>
							<uni-tag :inverted="true"
								:text="`限购${selGoodsDetail.limitNum}${selGoodsDetail.specification || ''}`"
								class="goods-tag-item" v-if="selGoodsDetail.limitNum" size="small"
								type="error"></uni-tag>
							<uni-tag :inverted="true" :text="`限购${selGoodsDetail.limitTimes}次`" class="goods-tag-item"
								v-if="selGoodsDetail.limitTimes" size="small" type="error"></uni-tag>
						</view>
						<view class="goods-guige" style="font-size: 14px;">已选择:
							{{ selGoodsDetail.count || 0 }}{{ selGoodsDetail.specification || '' }}
						</view>
					</view>
					<view class="goods-share">
						<button type="primary" size="mini" plain open-type="share">分享</button>
					</view>
				</view>
				<view class="goods-sel-num">
					<view class="goods-sel-tip">数量</view>
					<view class="goods-sel">
						<my-number-box v-model="selGoodsDetail.count" background="#1aad19" color="#fff"
							@plus.stop="plus(selGoodsDetail)" :max="maxValue(selGoodsDetail)"
							:disabled="(selGoodsDetail.limitNum || selGoodsDetail.stock) <= 0"
							@minus="minus(selGoodsDetail)" />
					</view>
				</view>
				<scroll-view scroll-y="true" :scroll-top="scorllTop"
					:style="{ height: `${windowHeight - statusBarHeight - navigationBarHeight - 100 - 30 - 86 - 60 - 50 - 10}px` }">
					<view class="goods-intro">
						<view class="goods-miaoshu">商品描述：</view>
						{{ selGoodsDetail.description }}
					</view>
					<view class="goods-video">
						<video :src="item" v-for="item in goodsDetailUrls(selGoodsDetail.videoUrl)" :key="item"></video>
					</view>
					<view class="goods-pic">
						<image :src="item" mode="widthFix" v-for="item in goodsDetailUrls(selGoodsDetail.detailUrl)"
							:key="item">
						</image>
					</view>
				</scroll-view>
			</view>
			<view class="goods-add-order" @click="buyGoods">
				添加购买
			</view>

		</view>
	</uni-popup>
</template>

<script>
	import {
		systemInfo,
		transform
	} from '@/minix/mixin.js'
	import {
		getShopInfo,
		getAllByCate,
		getMarketing,
		searchGoodsByName
	} from '@/api/shops/shopEdit/shopEdit'

	import {
		getShopGoodsByCateId,
		crateOrder,
		getHotGoodsByCate,
		getShopGoodsCate,
		getAllGoods
	} from '@/api/consomer/orderin/orderin.js'

	import {
		login,
		pingLogin
	} from '@/api/index/index'
	import {
		throttle
	} from '@/utils/reqUtil.js'

	export default {
		mixins: [systemInfo, transform],

		data() {
			return {
				// 禁止模态状态下 页面滚动
				show: false,
				orderBtnShow: true,
				shopInfo: {},
				shopId: '',
				cateList: [],
				goodsList: [],
				list1: [],
				list2: [],
				active: {},
				cateGoodsMap: new Map(),
				selectGoods: new Map(),
				orderTotalPrice: 0,
				orderText: '',
				goodsCount: '',
				selectGoodsList: [],
				selGoodsDetail: {},
				oldValue: 0,
				
				tabCurrent : 0,

				allGoodsMap: new Map(),
				hasMinSaleNum: new Map(),

				leftGap: 10,
				rightGap: 10,
				columnGap: 10,

				marketing: [],

				isSearch: false,
				
				shareCateId: '',
				shareGoodsId:''
			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		onLoad: function(option) {
			this.getSystemInfo()
			this.shopId = option.shopId
			this.shareCateId = option.cateId
			this.shareGoodsId = option.goodsId
			this.init()
		},

		onShareAppMessage(res) {
			let reqObject = {
				path: '/pages/shopInfo/shopInfo',
				imageUrl: '/static/logo.png',
			}
			if (res.from == 'button') {
				const user = uni.getStorageSync("userinfo")
				reqObject.path += `?shopId=${this.shopId}&cateId=${this.active.id}&goodsId=${this.selGoodsDetail.id}`
				reqObject.imageUrl = this.selGoodsDetail.multimediaUrl
				reqObject.title = this.selGoodsDetail.name
			}
			return reqObject
		},

		watch: {
			orderTotalPrice(newValue) {
				this.orderText = this.priceTransform(newValue)
			},

			immediate: true // watch侦听操作内的函数会立刻被执行
		},
		methods: {
			init() {
				let _this = this
				// 测试登录信息
				pingLogin().then((res) => {
					if (!res) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								login({
									code: loginRes.code
								}).then(() => {
									_this.initInner()
								})
							}
						})
					} else {
						this.initInner()
					}
				})
			},

			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},

			async initInner() {
				let _this = this
				this.orderTotalPrice = 0
				let shopRes = await getShopInfo(this.shopId)
				this.shopInfo = shopRes

				if (shopRes.state !== 1) {
					return uni.showModal({
						title: '店铺已打烊',
						showCancel: false,
						success: (r) => {
							if (r.confirm) {
								_this.back()
							}
						}
					})
				}

				let res = await getShopGoodsCate(this.shopId)
				if (res.length > 0) {
					this.cateList.push(...res)
					if (this.cateList.length > 0) {
						if(this.shareCateId) {
							
							this.cateList.forEach((value, index) => {
								if(this.shareCateId === value.id) {
									this.active = value
									this.tabCurrent = index
									return
								}
							})
							
							// this.active = this.cateList.find(e => e.id === this.shareCateId)
						} else {
							this.active = this.cateList[0]
						}
						await this.activeChange(this.active)
						if(this.shareGoodsId) {
							this.goodsClick(this.allGoodsMap.get(this.shareGoodsId))
						}
						
					}
				} else {
					let allGoods = await getAllGoods(this.shopId)
					allGoods.forEach((e) => {
						e.w = 100
						e.h = 100
					})
					this.goodsList = allGoods
				}
				getMarketing(this.shopId).then((result) => {
					if (result.lotteryStatus == 1) {
						// 抽奖
						this.marketing.push({
							name: "red-packet",
							title: '抽奖',
							url: result.lotteryUrl
						})
					}
				})
			},
			async beginSearch(e) {
				let res = await searchGoodsByName({
					shopId: this.shopId,
					kw: e.value
				})
				this.isSearch = true
				this.goodsList = []
				this.$refs.waterfall.clear()
				this.list1 = [];
				this.list2 = [];
				res.forEach((e) => {
					e.w = 100
					e.h = 100
					this.goodsList.push(e)
				})

			},
			cancelSearch(e) {
				if (this.isSearch) {
					this.isSearch = false
					this.activeChange(this.active)
				}
			},
			marketingClick(e) {
				if (e.title == "抽奖") {
					return uni.navigateTo({
						url: '/subpkg/consumer/lottery/lottery?shopId=' + this.shopId
					})
				}
				if (e.title == "秒杀") {
					return uni.navigateTo({
						url: '/subpkg/consumer/lottery/lottery?shopId=' + this.shopId
					})
				}
			},
			async activeChange(item) {
				this.active = item
				this.goodsList = []
				this.$refs.waterfall.clear()
				this.list1 = [];
				this.list2 = [];
				if (this.cateGoodsMap.has(item.id)) {
					let ids = this.cateGoodsMap.get(item.id)
					ids.forEach(e => {
						this.goodsList.push(this.allGoodsMap.get(e))
					})
					return
				}
				let result;
				if (item.type === 2) {
					result = await getHotGoodsByCate(item.id)
				} else {
					result = await getShopGoodsByCateId(item.id)
				}
				let ids = []
				result.forEach((e) => {
					e.w = 100
					e.h = 100
					this.allGoodsMap.set(e.id, e)
					this.goodsList.push(e)
					ids.push(e.id)
				})
				this.cateGoodsMap.set(item.id, ids)
			},
			storeText(stock) {
				stock = stock || 0
				if (stock <= 0) {
					return '已售罄'
				} else if (stock >= 500) {
					return ""
				} else {
					return '剩余' + stock
				}
			},

			plus(item) {
				if (item.minSaleNum > 1) {
					if (item.count < item.minSaleNum) {
						item.count = item.minSaleNum
					}
				}

				if (item.count > 0) {
					this.selectGoods.set(item.id, item)
				} else {
					this.selectGoods.delete(item.id)
				}
				this.goodsList.map(e => {
					if (e.id == item.id) {
						e.count = item.count
						return
					}
				})
				this.orderTotalPrice = this.selectGoods.values().map(e => e.price * e.count)
					.reduce((total, num) => total + num, 0)
				this.goodsCount = this.selectGoods.values().map(e => e.count)
					.reduce((total, num) => total + num, 0)
			},
			minus(item) {
				if (item.minSaleNum > 1) {
					if (item.count < item.minSaleNum) {
						item.count = 0
					}
				}

				if (item.count > 0) {
					this.selectGoods.set(item.id, item)
				} else {
					this.selectGoods.delete(item.id)
				}
				this.goodsList.map(e => {
					if (e.id == item.id) {
						e.count = item.count
						return
					}
				})
				this.orderTotalPrice = this.selectGoods.values().map(e => e.price * e.count)
					.reduce((total, num) => total + num, 0)
				this.goodsCount = this.selectGoods.values().map(e => e.count)
					.reduce((total, num) => total + num, 0)
			},
			maxValue(goods) {
				if (goods.stock <= 0) {
					return 0;
				}

				if (goods.limitNum) {
					return goods.limitNum > goods.stock ? goods.stock : goods.limitNum
				}
				return goods.stock
			},
			async createOrder() {
				if (this.selectGoods.size > 0) {
					let selects = [...this.selectGoods.values()
						.filter(e => e.count > 0).map(e => {
							return {
								goodsId: e.id,
								goodsNum: e.count,
								buyPrice: e.price,
								weight: 0,
								goodsName: e.name,
								goodsSpec: e.specification
							}
						})
					]
					if (selects.length > 0) {
						let newOrderForm = {
							shopId: this.shopId,
							orderDetailBos: selects
						}
						uni.showLoading({
							title: '正在生成订单'
						})

						let res = await crateOrder(newOrderForm)
						uni.hideLoading()
						if (res.code === 403) {
							uni.showToast({
								title: '请先登录',
								icon: 'error'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/subpkg/consumer/login/login'
								})
							}, 300)
							return
						}
						this.selectGoodsList = []
						let orderId = res.id
						uni.navigateTo({
							url: '/subpkg/consumer/orderDetail/orderDetail?id=' + orderId
						})
					}
				} else {
					return uni.showToast({
						icon: 'none',
						title: '没有选择商品'
					})
				}
			},
			orderListClick() {
				this.show = !this.show
				if (this.show) {
					this.selectGoodsList = []
					this.selectGoods.forEach(value => {
						this.selectGoodsList.push(value)
					})
					this.$refs.selOrderPopup.open()
				} else {
					this.closeSelPop();
				}
			},
			closeSelPop() {
				this.show = false;
				this.orderBtnShow = true;
				this.$refs.selOrderPopup.close()
			},

			goodsClick(goods) {
				this.selGoodsDetail = goods;
				this.oldValue = goods.count;
				if (this.selGoodsDetail.count !== 0) {
					this.selGoodsDetail.count = this.selGoodsDetail.count
				} else {
					this.selGoodsDetail.count = Math.min(this.selGoodsDetail.minSaleNum, this.selGoodsDetail.stock)
				}
				this.show = true;
				this.$refs.goodsPop.open()
				this.orderBtnShow = false
			},
			goodsDetailUrls(url) {
				if (url) {
					return url.split(',')
				}
				return ''
			},
			buyGoods() {
				if (this.selGoodsDetail.count <= 0) {
					return uni.showToast({
						icon: 'none',
						title: '没有添加数量'
					})
				}
				this.plus(this.selGoodsDetail)
				this.show = false;
				this.$refs.goodsPop.close()
				this.orderBtnShow = true
			},
			closeGoodsPop() {
				this.selGoodsDetail.count = this.oldValue
				this.plus(this.selGoodsDetail)
				this.oldValue = 0;
				this.show = false;
				this.$refs.goodsPop.close()
				this.orderBtnShow = true
			},

			back() {
				const p = getCurrentPages()
				if (p.length > 2) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.header-panel {
		display: flex;
		align-items: center;
		font-size: 16px;
	}

	.shop-name {
		font-size: 16px;
		overflow: hidden;
		font-weight: 600;
		text-align: center;
	}

	.back-icon {
		position: fixed;
		width: 30px;
		height: 30px;
		left: 10px;
	}

	.swiper-item-view {
		background-size: cover;
		width: 100%;
		height: 100%;
	}

	.header-top {
		height: 100px;

		.bg-text {
			display: flex;
			justify-content: center;
		}

		.shop-bg-image {
			width: 100%;
			height: 100%;
		}
	}



	.marketing-item {
		background-color: red;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		border-radius: 50%;
		margin: 0 auto;
		font-weight: bold;
		box-shadow: 0 0 2px 3px #ccc;
	}

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
		padding-bottom: 5px;
		background-color: #fff;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;

			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}

		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}

		&__btn {
			padding: 10px 0;
		}
	}

	// .goods-pull-img {
	// 	width: ;
	// }

	.shop-info {
		background-color: rgba(255, 255, 255, 0.65);
		border-radius: 10px;
		width: 90%;
		margin: 0 auto;
		margin-top: -50px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		z-index: 80;
		position: relative;

		.info-top {
			display: flex;
			flex-direction: row;

			.avatar-area {
				width: 102rpx;
				height: 102rpx;
				display: flex;

				.avatar-edit {
					font-weight: bold;
					font-size: 14px;
					// height: 100%;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.info-content {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: space-around;

				.info-content-name {
					font-size: 20px;
					font-weight: bold;
				}

				.info-content-time {
					font-size: 14px;
				}


			}


		}



		.info-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			// margin-top: 10px;

			.info-addr {
				font-size: 13px;
				font-weight: 600;
				flex: 1;
			}

			.phone-area {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.line {
			border-bottom: 2px solid #d1c9c9;
			margin: 10px 0;
		}

		.info-intro {
			font-size: 13px;
			font-weight: 600;
		}
	}

	.lottery-area {
		position: fixed;
		bottom: 80px;
		right: 10px;
		background-color: red;
		font-size: 18px;
		width: 60px;
		height: 60px;
		color: #fff;
		border-radius: 50%;
		font-weight: bold;
		text-align: center;
		border: 1px solid #f5ed04;
		box-shadow: 0 0 2px 3px #ccc;
		z-index: 80;
	}

	.goods-area {
		width: 95%;
		margin: 0 auto;

		.item {
			padding-left: 5px;
			padding-bottom: 5px;
		}

		.title {
			font-size: 16px;
			font-weight: bold;
		}

		.desc {
			font-size: 14px;
		}
	}

	.goods-show-intro {
		padding: 0 10px;
	}

	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 100px;
			background-color: #f7f7f7;

			.left-scroll-view-item {
				background-color: #f7f7f7;
				line-height: 40px;
				text-align: center;
				font-size: 14px;

				&.active {
					background-color: #ffffff;
					position: relative;
					font-weight: bold;
					color: $base-color;

					&::after {
						content: ' ';
						display: block;
						width: 4px;
						height: 40px;
						background-color: $base-color;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
				}

				&.yingxiao {
					color: red;
				}
			}
		}
	}

	.goods-tag {
		margin-top: 0;
		padding-bottom: 5px;
	}


	.goods-show {
		background-color: #fff;
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		padding: 5px;
		border-bottom: 1px solid #efefef;

		.goods-show-header {
			display: flex;
			flex-direction: row;
		}

		.goods-image {
			width: $goods-image;
			height: $goods-image;
			border-radius: 5px;
		}

		.goods-show-body {
			margin-left: 5px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			flex: 1;

			.goods-name {
				font-size: 14px;
			}



			.goods-price {
				font-size: 18px;
				color: #ea6d31;
				font-weight: bold;
			}
		}



		.goods-show-footer {
			display: flex;
			justify-content: flex-end;
			margin-top: 5px;
		}
	}

	.goods-hua-price {
		text-decoration-line: line-through;
		color: #afaeae;
		font-size: 14px;
	}

	.goods-tag-item {
		margin-right: 5px;
		display: inline-flex;
	}

	.no-data {
		text-align: center;
		font-size: 16px;
		height: 40px;
		color: #a3a3a3;
	}

	.order-area {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		height: 40px;

		.direct-pay {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.direct-pay-text {
				width: 120px;
				height: 100%;
				background-color: $base-color;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				font-size: 14px;
				font-weight: bold;
			}
		}

		.order-pay {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			margin: 5px 20px;
			background-color: #fff;
			border-radius: 5px;

			.order-list {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-weight: bold;
				flex: 1;
				height: 100%;
				border-radius: 20px 0 0 20px;
				background-image: linear-gradient(to right, #CDDC39, #8BC34A);
			}

			.order-pay-btn {
				height: 100%;
				background-color: $base-color;
				color: #fff;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				flex: 1;
				border-radius: 0 20px 20px 0;
			}

		}
	}

	.sel-order-pop {
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		// margin-bottom: 50px;
		padding: 0 10px;
	}

	.sel-order-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #efefef;
		height: 40px;

		.sel-order-num {
			font-size: 16px;
		}
	}

	.goods-detail-pop {
		background-color: #fff;
		padding: 0 10px;
		border-radius: 10px 10px 0 0;
	}

	.goods-info {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #efefef;
		padding-bottom: 5px;

		.goods-avatar {
			width: 80px;
			height: 80px;
			background-size: cover;
			border-radius: 5px;
		}

		.goods-param {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-left: 5px;
			flex: 1;
			margin-top: 5px;

			.goods-name {
				font-size: 14px;
			}

			.goods-hua-price {
				text-decoration-line: line-through;
				color: #afaeae;
				font-size: 14px;
			}

			.goods-price {
				font-size: 18px;
				color: #ea6d31;
				font-weight: bold;
			}
		}
	}

	.goods-price {
		font-size: 16px;
		color: #ea6d31;
		font-weight: 600;
	}

	.goods-sel-num {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		border-bottom: 1px solid #efefef;
	}

	.goods-intro {
		font-size: 14px;
	}

	.goods-miaoshu {
		font-size: 16px;
		font-weight: bold;
	}

	.goods-video {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.goods-pic {
		width: 100%;
		padding-bottom: 10px;

		image {
			width: 100%;
		}
	}

	.goods-add-order {
		height: 50px;
		line-height: 50px;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		background-color: $base-color;

	}



	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		padding: 15px 0 15px 0;
		background-color: #F4F5F6;
		border-bottom-style: solid;
		border-bottom-color: #E2E2E2;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5px 0;
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.market-area {
		padding: 0 10px;
	}
</style>
<style scoped lang="scss">
	::v-deep .uni-popup {
		z-index: 2099;
	}
</style>